<template xmlns="http://www.w3.org/1999/html">
  <div>
    <div class="docker">
      <div div="container">
        <!-- nav -->
        <div class="nav">
          <a v-if="$auth.front_username == ''">
            <a style="color:#DE4323;margin-left: 150px;">
              <router-link to="/login">亲，请登录</router-link>
            </a>
            <a class="div">免费注册</a>
          </a>
          <a v-else>
            <a style="color:#DE4323;margin-left: 150px;">
              <router-link to="/login">用户: {{ $auth.front_username }}</router-link>
            </a>
            <a class="div" @click="Logout">登出</a>
          </a>
          <a style="margin-left: 400px;"></a>
          <a class="push"></a>
          <a class="push">
            <router-link to="/">科购首页</router-link>
          </a>
          <a class="push">
            <router-link to="/GoodsCar"><img src="../assets/car.png">&nbsp购物车</router-link>
          </a>
          <a class="push">
            <router-link to="/orderList">订单详情</router-link>
          </a>
          <a class="push">
            <router-link to="/Recharge">充值页面</router-link>
          </a>
          <a class="push">
            <router-link to="/feedback">用户反馈</router-link>
          </a>
          <a class="push"></a>
        </div>
        <!-- main -->
        <div class="main">
          <div class="logo">
            <h1>科购</h1>
            <p>KeGou</p>
          </div>
        </div>
      </div>
    </div>

    <div class="Content-Main">
      <div class="Content-Main1">
        <h1>用户反馈</h1>
      </div>
      <form action="" method="post" class="form-report">
        <label>
          <label>
            <span>联系方式：</span>

            <input type="text" v-model="email" placeholder="请输入你的邮箱 可以不填" style="height: 30px;">
          </label>
          <label>
            <span>请输入你的建议或反馈</span>
            <textarea id="mesaage" v-model="backed" name="message" placeholder="你可以告诉我"></textarea>
          </label>
          <label>
            <span>商品信息:</span>
            <el-select v-model="value" clearable placeholder="默认" style="width: 310px">
              <el-option v-for="(item,key) in order" :key="key" :value="item"></el-option>
            </el-select>
          </label>
          <button type="button" @click="sendInfo" class="btn btn-primary btn-lg btn-block" id="csx"
                  style="width: 310px;height: 50px;border: hidden; letter-spacing: 40px; ">提交
          </button>
        </label>
      </form>
    </div>
    <div class="footer">
      <p>反馈建议 | 官方空间 | 空间活动 | 空间应用 | ABCmouse腾讯版 | 腾讯原创馆 | QQ互联 | QQ登录 | 社交组件 | 应用侵权投诉 | Complaint Guidelines</p>
      <p>Copyright 2005 - 2022 Tencent.All Rights Reserved.</p>
      <p><a href="https://beian.miit.gov.cn">湘ICP备2022018153号-1</a></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "feedback",
  data() {
    return {
      email: '', //储存反馈人邮箱
      backed: '', //反馈信息
      value: '', //储存订单信息
      order: [], //反馈商品
    }
  },
  methods: {
    sendInfo() {
      if (this.backed.length == 0) { //用户没有返回意见
        this.$notify.info({
          title: '系统信息',
          message: '请填写用户意见'
        })
      } else {
        if (this.email.length == 0) { //代表用户匿名
          this.email = "匿名用户"
        }
        if (this.value.length == 0) { //用户没有选择具体商品
          this.value = "默认"
        }
        const form_data = new FormData;
        form_data.append("email", this.email)
        form_data.append("feedback", this.backed)
        form_data.append("order_info", this.value)
        this.$http.post("/user/feedback", form_data,{}).then((rep) => {
            this.$notify.info({
              title: '系统信息',
              message: rep.data.msg
            })
        }).catch((rep) => {
          console.log(rep)
        })
      }
    },
    Logout() {
      this.$auth.delFrontAuth()
      this.$router.push("/login")
    },
    //如果是登陆的就获取该用户的订单
    GetUserOrder() {
      this.$http.get("/product/GetUserOrder", {
        params: {
          "email": this.$auth.front_username //用户登陆的用户名
        },
      }).then((rep) => {
        if (rep.data.code == 200) { //代表已经成功获取到用户订单
          console.log(rep)
          this.order = rep.data.order
        }
      }).catch((rep) => {
        console.log(rep)
      })
    }
  },
  mounted() {
    this.GetUserOrder();
  }
}
</script>

<style scoped>
.nav {
  border: 1px solid #F5F5F5;
  width: 100%;
  font-size: 10px;
  background-color: #F5F5F5;
}

.nav a {
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}

.nav .div {
  margin-left: 30px;
  color: #8D8D8D;
}

.nav .push {
  margin-left: 30px;
  color: #8D8D8D;
}

.nav .push img {
  width: 15px;
  margin-left: 10px;
}

.logo {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-left: 200px;
  margin-top: 40px;
  color: #EB5E2A;
}

.logo p {
  font-size: 20px;
  margin-top: -20px;
  margin-left: 4px;
}

.Content-Main {
  max-width: 500px;
  margin: auto;
  margin-top: 50px;
  padding: 20px 30px 20px 30px;
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 1px 1px 1px #FFF;
  border: 1px solid #DDD;
  border-radius: 5px;
  color: #888;
  background: #FFF;
}

.Content-Main h1 {
  display: block;
  padding: 0px 0px 10px 40px;
  margin: -10px -30px 30px -30px;
  font: 25px "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-bottom: 1px solid #DADADA;
  color: #000000;
}

.Content-Main h1 > span {
  display: block;
  font-size: 11px;
}

.Content-Main label {
  display: block;
  margin: 0px 0px 5px;
}

.Content-Main label > span {
  float: left;
  width: 20%;
  padding-right: 10px;
  margin-top: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-align: right;
  color: #333;
}

.Content-Main input[type="text"], .Content-Main textarea {
  width: 70%;
  height: 20px;
  padding: 5px 0px 5px 5px;
  margin-bottom: 16px;
  margin-right: 6px;
  margin-top: 2px;
  line-height: 15px;
  border-radius: 4px;
  border: 1px solid #9FCDFF;
  color: #888;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  outline-color: pink;
}

.select1 {
  width: 71%;
  height: 35px;
  margin-bottom: 16px;
  margin-right: 6px;
  margin-top: 2px;
  line-height: 15px;
  padding: 5px 0px 5px 5px;
  border-radius: 4px;
  border: 1px solid #9FCDFF;
  color: #888;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  outline-color: pink;
}

.select2 {
  width: 13%;
  border-radius: 4px;
  border: 1px solid #CCC;
  color: #888;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.Content-Main textarea {
  width: 70%;
  height: 100px;
  padding: 5px 0px 0px 5px;
}

.button {
  padding: 10px 25px 10px 25px;
  margin-left: 111px;
  border-radius: 4px;
  border: 1px solid #CCC;
  background: #FFF;
  color: #333;
}

.button:hover {
  color: #333;
  background-color: #EBEBEB;
  border-color: #ADADAD;
}

button {


  background: linear-gradient(to right, #F9CF9B, #F5B095);
  border: #EB5E2A;
  margin-left: 90px;
}


.footer {
  margin-top: 70px;
  border: 1px solid #fff;
  text-align: center;
  font-size: 10px;
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}

.footer p {
  margin-bottom: 0px;
}
</style>
